<template>
<div class="mainPage">
  <div class="sideBar">
    <el-col :span="24" class="left-col"><!--   :span=24 24就是占满了-->
<!--      <h5 class="mb-2" style="background-color:#545c64">驾校报名系统</h5>-->
      <el-menu
          router
          default-active="/"
          class="left-menu"
          active-text-color="#ffd04b"
          background-color="#545c64"
          text-color="#fff"
          :collapse="isCollapse"
          @open="handleOpen"
          @close="handleClose"
      >
        <el-menu-item-group>
          <h5 class="mb-2" style="background-color:#545c64">驾校报名系统</h5>
        </el-menu-item-group>
        <el-menu-item index="/finally" v-if="this.type===3||this.type===1">看板</el-menu-item>
        <el-sub-menu index="1" v-if="this.type===3">
          <template #title>
            <el-icon><location /></el-icon>
            <span>基本信息管理</span>
          </template>
          <el-menu-item index="/admin">课程信息</el-menu-item>
          <el-menu-item index="/vehicle">车辆信息</el-menu-item>
          <el-menu-item index="/student">学员信息</el-menu-item>
          <el-menu-item index="/coach">教练信息</el-menu-item>
<!--          <el-sub-menu index="1-4">-->
<!--            <template #title>后台信息管理</template>-->

<!--          </el-sub-menu>-->
        </el-sub-menu>
<!--        <el-sub-menu index="1-6" v-if="this.type===1">-->
<!--          <template #title>教练</template>-->
          <el-menu-item index="/mycourse" v-if="this.type===1">我的课程</el-menu-item>
<!--          <el-menu-item index="/mycourseadmin" v-if="this.type===1">待完成的课程</el-menu-item>-->
<!--          <el-menu-item index="/myfinishcourse" v-if="this.type===1">已教授课程记录</el-menu-item>-->
<!--        </el-sub-menu>-->
        <el-menu-item index="/enroll" v-if="this.type===2&&this.flag===0">
          <el-icon><icon-menu /></el-icon>
          <span>报名</span>
        </el-menu-item>
        <el-menu-item index="/allConserve" v-if="this.type===3">
          <el-icon><document /></el-icon>
          <span>课程预约审批</span>
        </el-menu-item>
        <el-menu-item index="/course" v-if="this.type===2">
          <el-icon><setting /></el-icon>
          <span>具体课程表</span>
        </el-menu-item>
        <el-menu-item index="/conserve" v-if="this.type===2">
          <el-icon><setting /></el-icon>
          <span>我的课程预约</span>
        </el-menu-item>
        <el-menu-item index="/judgeEnroll" v-if="this.type===3">
          <el-icon><setting /></el-icon>
          <span>报名表审批</span>
        </el-menu-item>
        <el-menu-item index="/EnrollCord" v-if="this.type===2">
          <el-icon><setting /></el-icon>
          <span>我的考试</span>
        </el-menu-item>
        <el-menu-item index="/AllEnroll" v-if="this.type===3">
          <el-icon><setting /></el-icon>
          <span>预约考试审批</span>
        </el-menu-item>
        <el-menu-item index="/AllEnroll2" v-if="this.type===3">
          <el-icon><setting /></el-icon>
          <span>考试成绩登记</span>
        </el-menu-item>
      </el-menu>
    </el-col>
  </div>
  <div class="context">
    <div class="topBar">
      <div class="breadCrumb">
        <div class="left">
          <div class="sideBarIcon">
            <el-icon :size="30" v-if="position" @click="changePosition">
              <Fold />
            </el-icon>
            <el-icon :size="30" v-if="!position" @click="changePosition">
              <Expand />
            </el-icon>
          </div>
          <div class="sideBarBread">
            <el-breadcrumb :separator-icon="ArrowRight">
              <el-breadcrumb-item :to="item.path" v-for="item in breadList" :key="item.id">{{item.meta.title}}</el-breadcrumb-item>
            </el-breadcrumb>
          </div>
        </div>
        <el-dropdown>
          <div class="right" @click="this.$router.push('/myMessage')">
            <el-avatar :size="45"
                       src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
            />
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item v-if="this.type===2">个人信息</el-dropdown-item>
              <el-dropdown-item v-else >
                <label @click="this.$router.push('/login')">退出登录</label>
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>

      </div>
      <div class="tabs">
        <el-tabs
            v-model="editableTabsValue"
            type="card"
            editable
            class="demo-tabs"
            @edit="handleTabsEdit"
        >
          <el-tab-pane
              v-for="item in editableTabs"
              :key="item.name"
              :label="item.meta.title"
              :name="item.name"
          >
            {{ item.content }}
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <RouterView/>
  </div>
</div>


</template>

<script setup>
import {RouterView} from 'vue-router'
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting, Expand,
} from '@element-plus/icons-vue'
import {ArrowRight, Fold} from '@element-plus/icons-vue'
</script>
<script>
import {ref} from "vue";
import request from "@/util/request";

export default {
  name: "Side",
  props: {
    msg: String
  },
  data(){
    return{
      breadList:[],
      editableTabsValue:ref(2),
      editableTabs:[],
      position:ref(true),
      isCollapse:ref(false),
      type:ref(''),
      flag:ref('')
    }
  },
  watch:{
    $route(){
      this.getBreadcrumb();
    }
  },
  methods: {
    getBreadcrumb() {
      let matched = this.$route.matched;
      this.breadList = matched;
      this.editableTabs=matched;
      console.log("路由信息为：")
      console.log(this.breadList)
    },
    handleTabsEdit(){

    },
    changePosition(){
      this.position=!this.position
      this.isCollapse=!this.isCollapse
    }

  },
  created() {
    this.getBreadcrumb()
    let data=JSON.parse(localStorage.getItem("data"))
    this.type=data.userType
    request.post("/api/student/getByuserId?userId="+data.userId).then(res=>{
      if(res.data!=null){
        this.flag=res.data.sAccept
      }

    })
  }
}
</script>

<style scoped>
.mainPage{
  display: flex;
  flex-wrap: wrap;
  width:100%;
  height: 100%;
}
.sideBar{
  width: 21vw;
  height: 100vh;
}
.context{
  width: 77vw;
}
.left-col{
  height: 100vh;
}
.left-menu{
  height: 100%;
}
.topBar{
  width: 100%;
  height: 20vh;
}
.breadCrumb{
  display:flex;
  width: 77vw;
  height: 10vh;
  flex-wrap: wrap;
}
.left{
  display: flex;
  width: 70vw;
}
.right{
  width: 7vw;
  align-content: center;
}
.tabs{
  width: 77vw;
  height: 10vh;
}
.sideBarIcon{
  width: 5vw;
  height: 10vh;
  align-content: center;
}
.sideBarBread{
  align-content: center;
  width: 70vw;
  height: 10vh;
}



</style>